<!DOCTYPE html>
<style>
    * {
        scrollbar-width: none;
    }
    html {
        background: white;
    }
    body {
        position: absolute;
        inset: 0px;
        display: flex;
        background: pink;
    }
    #outer {
        overflow: hidden;
        background: orange;
        margin-top: 100px;
    }
    #inner {
        height: 1000px;
        background: yellow;
    }
    .item {
        box-sizing: border-box;
        border: 1px solid black;
        background: lime;
        height: 50px;
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.5;
    }
</style><body><div id="outer"><div id="inner">
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
